<template>
  <view class="content">
    <form @submit="modifyCommonInfoSumbit">
      <view class="inline-form">
        <view class="immutable">手机号</view>
        <input
          type="text"
          disabled
          :value="
            localData.phone.substring(0, 3) +
            '*****' +
            localData.phone.substring(8)
          "
        />
        <view>昵称</view>
        <input
          type="text"
          name="nickname"
          :value="localData.nickname"
          maxlength="32"
        />
        <view>性别</view>
        <picker
          name="sex"
          mode="selector"
          :value="index"
          :range="sex_range"
          @change="bindPickSexChanged"
        >
          <view class="uni-input">{{ sex_range[index] }}</view>
        </picker>
      </view>
      <view>
        <view>个性签名</view>
        <textarea
          name="userDescription"
          maxlength="255"
          v-model="localData.description"
        ></textarea>
      </view>
      <button type="primary" form-type="submit">确认修改</button>
    </form>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      sex_range: ["男", "女"],
      index: 0,
      currentSwiperIndex: 0,
    };
  },
  computed: mapState(["localData"]),
  methods: {
    modifyCommonInfoSumbit: function (e) {
      let values = e.detail.value;
      console.log(values);
      let postdata = {
        option: "modifyInfo",
        user_phone: this.localData.phone,
        user_name: values.nickname,
        user_sex: this.sex_range[values.sex],
      };
      if (values.userDescription) {
        postdata.user_description = values.userDescription;
      }
      console.log("modify submit", postdata);
      this.$http
        .post(this.urlApi.user, postdata)
        .then((res) => {
          let status = res.data.status;
          console.log("modify res", res.data);
          switch (status) {
            case "100": {
              uni.showToast({ title: "修改成功" });
              this.login({
                phone: this.localData.phone,
                nickname: values.nickname,
                sex: this.sex_range[values.sex],
                description: values.userDescription,
              });
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
              break;
            }
            case "101": {
              uni.showToast({ title: "修改失败", icon: "error" });
              break;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    bindPickSexChanged: function (e) {
      this.index = e.target.value;
    },
    ...mapMutations(["login"]),
  },
};
</script>

<style>
.top-swicther-item-actived {
  color: deepskyblue !important;
}
.top-swicther-item {
  font-size: 0.5em;
  margin: 20rpx;
  color: gray;
}
.top-switcher {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}
uni-swiper {
  height: 1000rpx;
}
input:disabled {
  user-select: none;
}
.content {
  margin: 0 auto;
  padding: 0 5%;
}
.inline-form {
  display: grid;
  /* grid-template-rows: 25% 25% 25%; */
  grid-template-columns: 25% 75%;
  border-bottom: 1px solid lightgrey;
}
.inline-form > view,
.inline-form > input,
textarea {
  font-size: 0.8em;
  padding: 2%;
  margin: 5px;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.5em;
}
.inline-form > input,
.uni-input {
  text-align: right;
  height: 1.5em;
}
.uni-input,
uni-input,
textarea {
  font-size: 0.8em;
  padding: 2%;
  width: 93%;
  margin: 5px;
  border: grey 1px solid;
  border-radius: 5px;
}
.immutable::after {
  content: "*";
  color: red;
  font-size: 20rpx;
}
</style>